<template>
  <div class="employment-page">
    <carousel></carousel>
    <div class="content">
      <el-radio-group v-model="radio">
        <el-radio-button label="1">岗位招聘信息</el-radio-button>
        <el-radio-button label="2">岗位应聘信息</el-radio-button>
      </el-radio-group>

      <!-- 新增的筛选条件 -->
      <div class="filter-section">
        <!-- 公司地点 -->
        <div class="filter-row">
          <span class="filter-label">公司地点：</span>
          <span
            class="custom-radio"
            :class="{ active: location === 'beijing' }"
            @click="location = 'beijing'"
          >
            北京
          </span>
          <span
            class="custom-radio"
            :class="{ active: location === 'shanghai' }"
            @click="location = 'shanghai'"
          >
            上海
          </span>
          <!-- 可以继续添加其他城市 -->
        </div>

        <!-- 融资阶段 -->
        <div class="filter-row">
          <span class="filter-label">融资阶段：</span>
          <span
            class="custom-radio"
            :class="{ active: financing === 'unfinanced' }"
            @click="financing = 'unfinanced'"
          >
            未融资
          </span>
          <span
            class="custom-radio"
            :class="{ active: financing === 'angel' }"
            @click="financing = 'angel'"
          >
            天使轮
          </span>
          <!-- 可以继续添加其他融资阶段 -->
        </div>

        <!-- 公司规模 -->
        <div class="filter-row">
          <span class="filter-label">公司规模：</span>
          <span
            class="custom-radio"
            :class="{ active: scale === 'lt15' }"
            @click="scale = 'lt15'"
          >
            少于15人
          </span>
          <!-- 可以继续添加其他规模选项 -->
        </div>

        <!-- 行业领域 -->
        <div class="filter-row">
          <span class="filter-label">行业领域：</span>
          <span
            class="custom-radio"
            :class="{ active: industry === 'ecommerce' }"
            @click="industry = 'ecommerce'"
          >
            电商平台
          </span>
          <!-- 可以继续添加其他行业 -->
        </div>
      </div>
      <div class="filter-section">
        <!-- 排序方式 -->
        <div class="filter-row">
          <span class="filter-label">排序方式：</span>
          <span
            class="custom-radio"
            :class="{ active: sort === 'default' }"
            @click="sort = 'default'"
          >
            默认排序
          </span>
          <span
            class="custom-radio"
            :class="{ active: sort === 'count' }"
            @click="sort = 'count'"
          >
            职位数量
          </span>
        </div>
      </div>
      <div class="box">
        <div class="box-item" @click="goDetail">
          <div class="img"></div>
          <div style="font-weight: bold">字节跳动</div>
          <div style="color: #9b9b9b">内容咨询,短视频</div>
          <div>我们的使命</div>
          <div class="item-bottom">
            <div>
              2055 <br />
              在招职位
            </div>
            <div>49% <br />简历处理率</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import carousel from "../components/carousel.vue";
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const state = reactive({
  radio: "1",
  location: "beijing",
  financing: "unfinanced",
  scale: "lt15",
  industry: "ecommerce",
  sort: "default",
});

let { radio, location, financing, scale, industry, sort } = toRefs(state);
function goDetail() {
  router.push({
    path: "employDetail",
  });
}
</script>

<style lang="scss" scoped>
.employment-page {
  min-height: calc(100vh - 160px);
  .content {
    width: 1200px;
    margin: auto;
    margin-top: 50px;
  }

  .filter-section {
    margin-top: 30px;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 20px;
    .filter-row {
      display: flex;
      align-items: center;

      .filter-label {
        width: 100px;
        font-weight: bold;
      }

      .custom-radio {
        padding: 2px 10px;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 10px;
        transition: all 0.3s;

        &:hover {
          color: #409eff;
          border-color: #409eff;
        }

        &.active {
          background-color: #409eff;
          border-color: #409eff;
          color: white;
        }
      }
    }
  }
  .box {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
    .box-item {
      width: 300px;
      height: 400px;
      border: 1px solid #ccc;
      text-align: center;
      cursor: pointer;
      .img {
        width: 100%;
        height: 50%;
      }
      div {
        font-size: 14px;
        margin-top: 10px;
      }
      .item-bottom {
        display: flex;
        justify-content: space-between;
        padding: 10px 60px;
        border-top: 1px solid #ccc;
      }
    }
  }
}
</style>
